import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// import My from '../views/My.vue'
Vue.use(VueRouter)

const routes = [{
            path: '/',
            redirect: "/home" //重定向组件
        },
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            // vue的组件的按需加载    提高性能  解决webapp首屏加载时间过慢问题
            path: "/my",
            name: "Myperson",
            component: () =>
                import ("../views/My.vue")
        },
        {
            // 设置一个必传参数/:uid  用params传参
            // :uid? 可选参数
            path: "/cart/:uid?",
            name: "Cart",
            component: () =>
                import ("../views/Cart.vue")
        },
        {
            path: "/login",
            name: "Login",
            alias: "/denglu", //路由的别名
            component: () =>
                import ("../views/login.vue")
        },
        {
            path: '/about',
            name: 'About',
            component: () =>
                import ('../views/About.vue'),
            // 路由独享钩子函数
            beforeEnter: (to, from, next) => {
                // ...
                console.log(to) //to 即将进入的页面
                console.log(from) //即将离开的页面
                next();
            },
            // 子路由配置 嵌套路由
            children: [{
                    path: "aboutNews",
                    name: "news",
                    component: () =>
                        import ("../views/aboutNews.vue")
                },
                {
                    path: "aboutGoods",
                    name: 'goods',
                    component: () =>
                        import ("../views/aboutGoods.vue")
                }
            ],
        }
    ]
    // 路由的history模式和hash模式的区别
    // history 模式 基于HTML5新增的history.pushState()方法封装的 地址栏中没有#号
    // hash 模式  基于hash值改变加载组件 原理是window.onhashchange事件 地址栏中显示#号
const router = new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes,
    // 每次回到某个页面  自动回到顶部
    scrollBehavior(to, from, savedPosition) {
        // return 期望滚动到哪个的位置
        // savedPosition  保留上个页面的位置  导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
        console.log(savedPosition) //结合this.$router.go()
        if (from.name == "Cart") {
            return savedPosition
        } else {
            return { x: 0, y: 0 }
        }
    }
})

export default router